<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>lazysizes - the umltimate lazyloader for responsive images, iframes and widget</title>
	<link rel="canonical" href="http://afarkas.github.io/lazysizes/index.html" />

	<script>
		function loadJS(u){var r=document.getElementsByTagName("script")[ 0 ],s=document.createElement("script");s.src=u;r.parentNode.insertBefore(s,r);}

		if(!window.HTMLPictureElement || !('sizes' in document.createElement('img'))){
			document.createElement('picture');
			//generating the config array
			window.picturefillCFG = window.picturefillCFG || [];
			picturefillCFG.push([ "algorithm", "saveData" ]);

			loadJS("https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.0-beta1/picturefill.min.js");
		}
	</script>

	<link href="assets/css/tidy.css" rel="stylesheet" />
	<style>
		.nav {
			margin-bottom: 30px;
		}
		.intrinsic {
			position: relative;
			padding-bottom: 75%;
			height: 0;
		}
		.intrinsic-2 {
			padding-bottom: 56.25%;
		}
		.intrinsic-3 {
			padding-bottom: 133.333%;
		}
		.intrinsic img,
		.intrinsic iframe,
		.intrinsic .lazyload {
			position:absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			border: none;
			overflow: hidden;
		}
		pre {
			-moz-tab-size: 2;
			tab-size: 2;
		}

		.thumbnail-small {
			width: 32%;
			display: inline-block;
			margin-bottom: 35px;
		}

		.scroll-view {
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			overflow-x: auto;
			overflow-y: hidden;
			position: relative;
			width: 100%;
			padding: 2px 2px 10px;
		}
		.scroll-doc {
			display: table;
			position: relative;
			text-align: left;
		}
		.scroll-item {
			display: table-cell;
			vertical-align: middle;
		}
		.scroll-item .thumbnail {
			margin: 5px 10px;
			width: 230px;
		}
		.scroll-item .thumbnail img {
			width: 100%;
			height: auto;
		}

		.lazyload:not(iframe) {
			opacity: 0;
		}

		img {
			max-width: 100%;
		}

		.lazyloading:not(iframe) {
			opacity: 1;
			transition: 600ms opacity;
			background: #f7f7f7 url(assets/imgs/loader.gif) no-repeat center;
			min-height: 60px;
		}

		.lazyloaded {
			opacity: 1;
			transition: 100ms opacity;
		}

		[data-expand].lazyload {
			opacity: 0;
			transform: scale(0.8) translateY(-100px);
		}

		[data-expand].lazyloaded {
			opacity: 1;
			transition: all 700ms;
			transform: scale(1) translateY(0px);
		}

		.effect-row-middle  > [data-expand]:nth-child(2),
		.effect-row-reverse  > [data-expand]:nth-child(3),
		.effect-row > [data-expand]:nth-child(1) {
			transition-delay: 100ms;
		}

		.effect-row-middle  > [data-expand]:nth-child(1),
		.effect-row-middle  > [data-expand]:nth-child(3),
		.effect-row-reverse  > [data-expand]:nth-child(2),
		.effect-row > [data-expand]:nth-child(2) {
			transition-delay: 400ms;
		}

		.effect-row-reverse  > [data-expand]:nth-child(1),
		.effect-row > [data-expand]:nth-child(3) {
			transition-delay: 700ms;
		}

	</style>
	<script>
		(function(){
			var docElem = document.documentElement;

			window.lazySizesConfig = window.lazySizesConfig || {};

			window.lazySizesConfig.loadMode = 1;

			//set expand to a higher value on larger displays
			window.lazySizesConfig.expand = Math.max(Math.min(docElem.clientWidth, docElem.clientHeight, 1222) - 1, 359);
			window.lazySizesConfig.expFactor = lazySizesConfig.expand < 380 ? 3 : 2;
		})();
	</script>
	<script src="plugins/unveilhooks/ls.unveilhooks.min.js" async=""></script>

	<script src="plugins/unload/ls.unload.min.js" async=""></script>
	<script src="lazysizes.min.js" async=""></script>

</head>
<body>

<div class="container">


	<div class="jumbotron">
		<h1>lazySizes</h1>
		<p><strong>lazySizes</strong> is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind.</p>
		<p>Simply add the JS to your website and put the <code>class</code> <code>lazyload</code> to all elements, which should be lazy loaded. For a short <a href="https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md">API description go to the readme.md</a>.</p>
	</div>

	<div id="examples">
		<div class="row">
			<div class="col-sm-12">
				<div class="thumbnail">
					<div class="intrinsic">
						<img alt="Boat"
							 data-src="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_b.jpg"
							 class="lazyload" />

					</div>

					<div class="caption">
						<h3>Image with LQIP technique</h3>
						<p>The low quality image placeholder pattern is a performance technique. While it might increase measured time until the <code>onload</code> event, it dramatically increases perceived performance.</p>
						<p>This pattern is recommended for above the fold/critical images.</p>
<pre>&lt;img
	alt="100%x200"
	src="low-quality.jpg"
	data-src="normal-quality.jpg"
	class="lazyload" /&gt;
</pre>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="thumbnail">
					<div class="intrinsic">
						<img alt="Desert Road"
							 data-src="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg" class="lazyload" />
					</div>

					<div class="caption">
						<h3>Normal lazy image</h3>
						<p>The normal image pattern can be used for non-critical/below the fold images or in case there is no low quality image available:</p>
<pre>&lt;img class="lazyload" data-src="image.jpg" alt="Desert Road" /&gt;
</pre>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12">
				<div class="thumbnail">
					<div class="intrinsic">
						<img
							sizes="(min-width: 1000px) 930px, 90vw"
							data-src="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg"
							data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
	https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
	https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
	https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,
	https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w"
							  class="lazyload" />
					</div>

					<div class="caption">
						<h3>responsive image with srcset and sizes attribute</h3>
						<p>Simply use <code>data-srcset</code> and <code>data-sizes</code> and you can support responsive images.</p>
<pre>&lt;img
	alt=""
	src="small.jpg"
	sizes="(min-width: 1000px) 930px, 90vw"
	data-srcset="small.jpg 500w,
		medium.jpg 640w,
		big.jpg 1024w"
	class="lazyload" /&gt;
</pre>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="thumbnail">
					<div class="intrinsic">
						<picture>
							<!--[if IE 9]><audio><![endif]-->
							<source
									data-srcset="//lorempixel.com/710/533/people/9/"
									media="(max-width: 990px)" />
							<source
									data-srcset="//lorempixel.com/930/698/people/8/"
									media="(max-width: 1024px)" />

							<source
									data-srcset="//lorempixel.com/1130/848/people/" />
							<!--[if IE 9]></audio><![endif]-->
							<img
								class="lazyload"
								data-src="//lorempixel.com/1130/848/people/"
								alt="image with artdirection" />
						</picture>
					</div>
					<div class="caption">
						<h3>responsive image with the <code>picture</code> element</h3>
						<p>The picture element is also supported. Simply add the <code>lazyload</code> class to the <code>img</code> and use <code>data-srcset</code> on your <code>source</code> and the <code>img</code> element.</p>
<pre>&lt;picture&gt;
	&lt;!--[if IE 9]&gt;&lt;video style="display: none"&gt;&lt;![endif]--&gt;
	&lt;source
		data-srcset="500.jpg"
		media="(max-width: 500px)" /&gt;
	&lt;source
			data-srcset="1024.jpg"
			media="(max-width: 1024px)" /&gt;
	&lt;source
			data-srcset="1200.jpg" /&gt;
&lt;!--[if IE 9]>&lt;/video&gt;&lt;![endif]--&gt;
&lt;img
		src=""
		class="lazyload"
		data-src="1024.jpg"
		alt="image with artdirection" /&gt;
&lt;/picture&gt;
</pre>
					</div>
				</div>
			</div>
		</div>

		<div class="row" id="autosizes-example">
			<div class="alert alert-info">
				<p><strong>automatic sizes feature</strong>: In case of lazy loading images the <code>sizes</code> attribute of the <code>img</code>/<code>source</code> elements can be calculated with JS.</p>
				<p>This automatic sizes feature is directly included in <strong>lazySizes</strong>. Simply use the keyword <code>auto</code> inside of the <code>data-sizes</code> attributes (<code>data-sizes="auto"</code>).</p>
				<p><strong>Important: How <code>sizes</code> is calculated</strong>: The automatic sizes calculation takes the width of the image if it is over <code>40</code> (see also <code>minSize</code> option). In case it's below the <code>minSize</code> threshold, it traverses up the DOM tree until it finds a parent which is over <code>40</code> and uses this number. Often the following general CSS rule might help: <code>img[data-sizes="auto"] { display: block; }</code>.</p>
			</div>

			<div class="col-sm-12">
				<div class="thumbnail">
					<div class="intrinsic">
						<img
								alt=""
								data-sizes="auto"
								data-src="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg"
								data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_c.jpg 800w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_b.jpg 1024w"
								class="lazyload" />
					</div>

					<div class="caption">
						<h3>responsive image with srcset and <strong>automatic sizes</strong> attribute</h3>
						<p>The <strong>autosizes feature</strong> makes using responsive images with the right <code>sizes</code> value easy as hell.</p>

<pre>&lt;img
	alt=""
	data-sizes="auto"
	data-src="medium.jpg"
	data-srcset="small.jpg 500w,
		medium.jpg 640w,
		big.jpg 1024w"
	class="lazyload" /&gt;
</pre>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="alert alert-danger">
				<p>For responsive images support you must use either use a full polyfill like <a href="https://github.com/scottjehl/picturefill" target="_blank">picturefill</a> or use the <a href="https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/respimg">extreme lightweight partial respimg polyfill plugin</a> or use the <a href="https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias">Responsive Images as a Service extension</a>.</p>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12">
				<div class="thumbnail">
					<div class="intrinsic intrinsic-2">
						<iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" frameborder="0" allowfullscreen="" class="lazyload">
						</iframe>
					</div>
					<div class="caption">
						<h3>iframe</h3>
						<p>Iframes can be loaded too:</p>
<pre>&lt;iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" class="lazyload" frameborder="0" allowfullscreen>&lt;/iframe&gt;
</pre>
					</div>
				</div>
			</div>
		</div>
		<div class="row lazyload" data-expand="-110">
			<div class="col-sm-6">
				<div class="thumbnail">
					<div class="intrinsic intrinsic-3">
						<img
								data-sizes="auto"
								class="lazyload no-src"
								data-src="https://farm1.staticflickr.com/192/504251019_ffc94c77b5.jpg"
								data-srcset="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg 240w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5.jpg 375w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_z.jpg 480w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_b.jpg 768w"
								alt="Windows on Istanbul" />
					</div>

				</div>

			</div>
			<div class="col-sm-6">
				<div class="caption">
					<h3><code>[data-expand]</code>: More than lazyloading</h3>
					<p>LazySizes normally loads in view elements as fast as possible and near the view elements are lazily pre-loaded. This can be modified in general using the <code>expand</code> option. With the <code>data-expand</code> attribute this can be changed element specific to expand or shrink the viewport.</p>

					<p>This can be used to create unveiling effects for elements with or even without loading anything.</p>
<pre>
&lt;style&gt;
.teaser.lazyload {
	opacity: 0;
	transform: scale(0.8);
}

.teaser.lazyloaded {
	opacity: 1;
	transform: scale(1);
	transition: all 700ms;
}
&lt;/style&gt;

&lt;script&gt;

window.lazySizesConfig = {
	addClasses: true
};
&lt;/script&gt;

&lt;div class="teaser lazyload" data-expand="-80"&gt;
	&lt;img data-src="image.jpg" class="lazyload" /&gt;
	&lt;h1&gt;Teaser Title&lt;/h1&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;
</pre>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="thumbnail">
					<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
					<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" data-link="assets/css/carousel.css" class="carousel lazyload lazypreload slide" data-interval="false" id="carousel-example-captions">
						<ol class="carousel-indicators">
							<li data-slide-to="0" data-target="#carousel-example-captions"></li>
							<li data-slide-to="1" data-target="#carousel-example-captions"></li>
						</ol>
						<div class="carousel-inner">

							<div class="item">
								<div class="intrinsic">
									<img alt="100%x200"
										 data-sizes="auto"
										 data-src="https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg"
										 data-srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
										 https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg 500w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_z.jpg?zz=1 640w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_o.jpg 800w"
										 class="lazyload" />
								</div>
								<div class="carousel-caption">
									<h3>First slide label</h3>
									<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
								</div>
							</div>

							<div class="item active">
								<div class="intrinsic">
									<img alt="100%x200"
										 data-src="https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg"
										 data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1024w"
										 data-sizes="auto"
										 class="lazyload" />
								</div>
								<div class="carousel-caption">
									<h3>Third slide label</h3>
									<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
								</div>
							</div>
						</div>
						<a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
							<span class="glyphicon glyphicon-chevron-left"></span>
						</a>
						<a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
							<span class="glyphicon glyphicon-chevron-right"></span>
						</a>
					</div>
					<div class="caption">
						<h3>Widgets/Javascript/Script</h3>
						<p>LazySizes can be extended to load nearly everything lazily. The <a href="https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins">ls.unveilhooks.js</a> plugin can be used to lazy load scripts, background images, and videos. Simply add a <code>data-script</code> to your widget and you are done:</p>
<pre>&lt;div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload"&gt;
	&lt;!-- widget content --&gt;
&lt;div&gt;
</pre>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="scroll-view">
				<div class="scroll-doc">
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_z.jpg"
									data-srcset="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg 240w,
						https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_n.jpg 320w,
						https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8.jpg 500w,
						https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_z.jpg 640w,
						https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_c.jpg 800w,
						https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg 1024w"
									alt="Desert Road" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg"
									data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w"
									alt="" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg"
									data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w"
									alt="@ The Desert Tortoise Natural Area" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg"
									data-srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg 500w"
									alt="Woman in water" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm3.staticflickr.com/2401/2171553538_37d0a133da.jpg"
									data-srcset="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg 240w,
https://farm3.staticflickr.com/2401/2171553538_37d0a133da.jpg 500w"
									alt="Borobudur" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm1.staticflickr.com/17/92230866_713ae1eeef_z.jpg"
									data-srcset="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg 240w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef.jpg 375w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_z.jpg 480w"
									alt="A tree in the blue" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<div class="intrinsic intrinsic-3">
								<img
										data-sizes="auto"
										class="lazyload"
										data-src="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_z.jpg"
										data-srcset="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg 240w,
	https://farm1.staticflickr.com/192/504251019_ffc94c77b5.jpg 375w,
	https://farm1.staticflickr.com/192/504251019_ffc94c77b5_z.jpg 480w"
										alt="Windows on Istanbul" />
							</div>
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm6.staticflickr.com/5139/5546134597_0b19627066.jpg"
									data-srcset="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg 240w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_n.jpg 320w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066.jpg 500w"
									alt="Goldie Dawn" />
						</div>
					</div>

					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg"
									data-srcset="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg 240w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg 320w"
									alt="Avebury Stone Circle" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg"
									data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w"
									alt="el castil de tierra" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm8.staticflickr.com/7356/11122919374_55294abec3_n.jpg"
									data-srcset="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg 240w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_n.jpg 320w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3.jpg 500w"
									alt="sunset" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_n.jpg"
									data-srcset="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg 240w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_n.jpg 320w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc.jpg 500w"
									alt="Sky and earth" />
						</div>
					</div>
					<div class="scroll-item">
						<div class="thumbnail">
							<img
									data-sizes="auto"
									class="lazyload"
									data-src="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf.jpg"
									data-srcset="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg 240w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf.jpg 375w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_z.jpg 480w"
									alt="Missing Ulsoor lake (Explore)" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="alert alert-info">
				<p>While other lazy loaders or responsive images solution need to be called, if new elements are added to the DOM or do become visible through a special user interaction or a JavaScript behavior.</p>
				<p>LazySizes does automatically detect any changes to the DOM and the visibility of <code>.lazyload</code> elements.</p>
				<button type="button" class="add-new btn btn-primary">click to add new elements</button>
			</div>

			<script type="text/html" class="template">
				<div class="row">
					<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/abstract/1/"
									alt="" />
						</div>
					</div>

					<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/animals/1/"
									alt="" />
						</div>
					</div>

					<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/business/1/"
									alt="" />
						</div>
					</div>
				</div>

				<div class="row effect-row">

					<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/cats/1/"
									alt="" />
						</div>
					</div>

					<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/city/1/"
									alt="" />
						</div>
					</div>

					<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/food/1/"
									alt="" />
						</div>
					</div>
				</div>

				<div class="row effect-row-middle">
					<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/nature/1/"
									alt="" />
						</div>
					</div>

					<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/sports/1/"
									alt="" />
						</div>
					</div>

					<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/technics/1/"
									alt="" />
						</div>

					</div>
				</div>

				<div class="row effect-row-reverse">
					<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/nightlife/1/"
									alt="" />
						</div>
					</div>

					<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/fashion/1/"
									alt="" />
						</div>
					</div>

					<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/people/1/"
									alt="" />
						</div>
					</div>
				</div>



				<div class="row">
					<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/transport/1/"
									alt="" />
						</div>
					</div>
					<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/animals/1/"
									alt="" />
						</div>
					</div>
					<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
						<div class="intrinsic">
							<img
									class="lazyload no-src"
									data-src="//lorempixel.com/400/300/food/2/"
									alt="" />
						</div>
					</div>
				</div>
			</script>
			<script>
				$('.add-new').on('click', function(){
					var $template = $('.template');
					$template.after($template.html());
				});
			</script>
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />

		</div>

	</div>




</div>
</body>
</html>
